<template>
	<view v-if="orderDetail" class="wrapper">
		<view class="goods-box">
			<view class="goods-no">
				订单编号：{{orderDetail.order_sn}}
			</view>
			<view v-for="(item,index) in orderDetail.goodsList" :key="index" class="goods">
				<image :src="imgUrl+item.goods_image+'?'+num" mode="aspectFit"></image>
				<view class="goods-r">
					<view class="goods-tit">
						{{item.goods_name}}
					</view>
					<view class="goods-sku">
						{{item.goods_model?item.goods_model:'默认规格'}}
					</view>
					<view class="goods-pay">
						购买数量：{{item.goods_number}}
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="detail-li border-bot">
			<view class="detail-li-l">
				事项：
			</view>
			<view class="detail-li-r">
				说明
			</view>
		</view> -->
		<!-- 地址 -->
		<view v-if="orderDetail.express_type==1" class="detail-box">
			<view class="detail-li border-bot">
				<view class="detail-li-l">
					名称：
				</view>
				<view class="detail-li-r">
					{{orderDetail.user_name}}
				</view>
			</view>
			<view class="detail-li border-bot">
				<view class="detail-li-l">
					联系方式：
				</view>
				<view class="detail-li-r">
					{{orderDetail.user_mobile}}
				</view>
			</view>
			<view class="detail-li border-bot">
				<view class="detail-li-l">
					收货地址：
				</view>
				<view class="detail-li-r">
					{{orderDetail.provinceName+orderDetail.cityName+orderDetail.areaName+orderDetail.user_address}}
				</view>
			</view>
		</view>
		<view class="detail-box">
			<view class="detail-li border-bot">
				<view class="detail-li-l">
					订单金额：
				</view>
				<view class="detail-li-r">
					￥{{orderDetail.pay_price}}
				</view>
			</view>
			<view class="detail-li border-bot">
				<view class="detail-li-l">
					下单时间：
				</view>
				<view class="detail-li-r">
					{{orderDetail.addtime}}
				</view>
			</view>
			<view class="detail-li border-bot">
				<view class="detail-li-l">
					订单状态：
				</view>
				<view v-if="orderDetail.refundstatus" class="detail-li-r red-text">
					{{REFUND_TYPE.getName(orderDetail.refundstatus)}}
				</view>
				<view v-else class="detail-li-r red-text">
					{{(orderDetail.express_type==2&&orderDetail.status==1)?'待提货':MARKET_EASY.getName(orderDetail.status)}}
				</view>
			</view>
		</view>
		<view class="detail-box">
			<view class="detail-li border-bot">
				<view class="detail-li-l">
					下单用户：
				</view>
				<view class="detail-li-r">
					{{orderDetail.user_name}}
				</view>
			</view>
			<view class="detail-li border-bot">
				<view class="detail-li-l">
					联系电话：
				</view>
				<view class="detail-li-r">
					{{orderDetail.user_mobile}}
				</view>
			</view>
			<view class="detail-li border-bot">
				<view class="detail-li-l">
					支付方式：
				</view>
				<view class="detail-li-r">
					{{PAY_TYPE.getName(orderDetail.pay_type)}}
				</view>
			</view>
			<view class="detail-li border-bot">
				<view class="detail-li-l">
					是否使用优惠券：
				</view>
				<view class="detail-li-r">
					{{orderDetail.coupon_id?'是':'否'}}
				</view>
			</view>
			<view v-if="orderDetail.pay_time" class="detail-li border-bot">
				<view class="detail-li-l">
					付款时间：
				</view>
				<view class="detail-li-r ">
					{{orderDetail.pay_time}}
				</view>
			</view>
			<view v-if="orderDetail.ship_time" class="detail-li border-bot">
				<view class="detail-li-l">
					发货时间：
				</view>
				<view class="detail-li-r ">
					{{orderDetail.ship_time}}
				</view>
			</view>
			<view v-if="orderDetail.receipt_time" class="detail-li border-bot">
				<view class="detail-li-l">
					收货时间：
				</view>
				<view class="detail-li-r ">
					{{orderDetail.receipt_time}}
				</view>
			</view>
			<view v-if="orderDetail.cancel_time" class="detail-li border-bot">
				<view class="detail-li-l">
					取消时间：
				</view>
				<view class="detail-li-r ">
					{{orderDetail.cancel_time}}
				</view>
			</view>
			<view v-if="orderDetail.apply_time" class="detail-li border-bot">
				<view class="detail-li-l">
					申请售后时间：
				</view>
				<view class="detail-li-r ">
					{{orderDetail.apply_time}}
				</view>
			</view>
			<view v-if="orderDetail.after_sale" class="detail-li border-bot">
				<view class="detail-li-l">
					处理售后时间：
				</view>
				<view class="detail-li-r ">
					{{orderDetail.after_sale}}
				</view>
			</view>
			<view v-if="orderDetail.denialreason" class="detail-li border-bot">
				<view class="detail-li-l">
					申请拒绝原因：
				</view>
				<view class="detail-li-r red-text">
					{{orderDetail.denialreason}}
				</view>
			</view>
			<view v-if="orderDetail.aftersaleexpress_name" class="detail-li border-bot">
				<view class="detail-li-l">
					退货快递公司：
				</view>
				<view class="detail-li-r ">
					{{orderDetail.aftersaleexpress_name}}
				</view>
			</view>
			<view v-if="orderDetail.aftersaleexpress_name" class="detail-li border-bot">
				<view class="detail-li-l">
					退货快递号：
				</view>
				<view class="detail-li-r ">
					{{orderDetail.aftersaleexpress_sn}}
				</view>
			</view>
		</view>
		
		<view class="order-btn-box">
			<view @click="changePrice" v-if="orderDetail.status==0" class="order-btn">
				修改价格
			</view>
			<view @click="deliverGoods" v-else-if="orderDetail.status==1&&orderDetail.express_type==1" class="order-btn">
				发货
			</view>
			<view @click="writeBtn" v-else-if="orderDetail.status==1&&orderDetail.express_type==2" class="order-btn">
				核销
			</view>
			<!-- <view @click="logistics" v-else-if="orderDetail.status==2" class="order-btn">
				查看物流
			</view> -->
<!-- 			<view @click="returnBtn" v-else-if="orderDetail.status==2||orderDetail.status==3||orderDetail.status==4||orderDetail.status==7||(orderDetail.status==6&&orderDetail.refundstatus==1)" class="order-btn">
				返回
			</view> -->
			<view @click="delBtn" v-else-if="orderDetail.status==5||orderDetail.status==8" class="order-btn">
				删除订单
			</view>
			<view @click="handleBtn" v-else-if="orderDetail.status==6&&orderDetail.refundstatus==1" class="order-btn">
				处理
			</view> 
			<view @click="seeBtn" v-else-if="orderDetail.status==6&&orderDetail.refundstatus==6" class="order-btn">
				确认收货并退款
			</view>
			<view @click="returnBtn" v-else class="order-btn">
				返回
			</view>
		</view>
		
		<!-- 提示窗 -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import { MARKET_EASY,PAY_TYPE,REFUND_TYPE } from '../../utils/enum.js'
	export default {
		data() {
			return {
				MARKET_EASY,
				PAY_TYPE,
				REFUND_TYPE,
				imgUrl:'',
				num:Math.random(),
				id:0,
				orderDetail:null
			}
		},
		onLoad(e) {
			this.id = e.id
			// this.id = 9
		},
		onShow(){
			this.imgUrl = this.api.imgUrl
			this.getDetail(this.id)
		},
		methods: {
			// 获取详情
			getDetail(order_id){
				this.api._post('Order/get_order_detail',{
					order_id
				}).then(res=>{
					console.log(res)
					this.orderDetail = res.data
				})
			},
			// 修改价格
			changePrice(){
				// console.log(encodeURIComponent(JSON.stringify(this.orderDetail)))
				uni.navigateTo({
					url:'./changePrice?item='+encodeURIComponent(JSON.stringify(this.orderDetail))
				})
			},
			// 发货
			deliverGoods(){
				this.api._post('Order/OrderShipping',{
					order_id:this.orderDetail.order_id,
				}).then(res=>{
					if(res.status==1){
						this.$refs.uToast.show({
							title:res.message,
							type: 'success'
						})
						this.getDetail(this.id)
					}else{
						this.$refs.uToast.show({
							title:res.message,
							type: 'error'
						})
					}
				})
				// uni.navigateTo({
				// 	url:'./deliverGoods?item='+encodeURIComponent(JSON.stringify(this.orderDetail))
				// })
			},
			// 查看物流
			logistics() {
				let obj = {
					code:this.orderDetail.express_code,
					no:this.orderDetail.express_sn
				};
				let url =encodeURIComponent(this.api.imgUrl+'/traces.html?2obj='+encodeURI(JSON.stringify(obj)))
				console.log(url)
				uni.navigateTo({
					url:'./logistics?url='+url
				})
			},
			// 返回
			returnBtn(){
				uni.navigateBack({
					delta:1
				})
			},
			//删除订单
			delBtn(){
				this.api._post('Order/get_delete_order',{
					order_id:this.id
				}).then(res=>{
					if(res.status==200){
						this.$refs.uToast.show({
							title:res.message,
							type: 'success'
						})
						let setT = setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
							clearTimeout(setT)
						},1000)
					}else{
						this.$refs.uToast.show({
							title:res.message,
							type: 'error'
						})
					}
				})
			},
			// 处理
			handleBtn(){
				uni.navigateTo({
					url:'./afterSale?item='+encodeURIComponent(JSON.stringify(this.orderDetail))
				})
			},
			// 查看
			seeBtn(){
				this.api._post('Order/Receipt',{
					order_id:this.orderDetail.order_id
				}).then(res=>{
					if(res.status==200){
						this.$refs.uToast.show({
							title:res.message,
							type: 'success'
						})
						this.getDetail(this.id)
					}else{
						this.$refs.uToast.show({
							title:res.message,
							type: 'error'
						})
					}
				})
			},
			// 核销
			writeBtn(){
				if(uni.getStorageSync('code')){
					this.api._post('Order/WriteoffOrder',{
						order_id:this.orderDetail.order_id,
						Selfmentioncode: uni.getStorageSync('code')
					}).then(res=>{
						uni.removeStorageSync('code')
						console.log(res)
						if(res.status==1){
							this.$refs.uToast.show({
								title:res.message,
								type: 'success'
							})
							this.getDetail(this.id)
						}else{
							this.$refs.uToast.show({
								title:res.message,
								type: 'error'
							})
						}
					})
				}else{
					this.$refs.uToast.show({
						title:"需用户提供二维码进行核销",
						type: 'error'
					})
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	@import url('../../common/common.css');
	.wrapper {
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		width: 100%;
		min-height: 100%;
		padding-bottom: 150upx;
		box-sizing: border-box;
	}
	page {
		background: #f7f7f7;
	}
	
	.goods-box{
		width: 100%;
		margin-top: 20upx;
		margin-bottom: 20upx;
		// height:306px;
		background:rgba(255,255,255,1);
		border-radius:6upx;
		padding: 30upx 32upx;
		box-sizing: border-box;
		.goods-no{
			font-size:24upx;
			font-family:PingFangSC;
			font-weight:400;
			color:rgba(51,51,51,1)
		}
		.goods{
			margin-top: 23upx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			>image{
				width:200upx;
				height:200upx;
				background:rgba(240,240,240,1);
				border-radius:6upx;
			}
			.goods-r{
				width: 443upx;
				height: 200upx;
				margin-left: 20upx;
				display: flex;
				justify-content: flex-start;
				align-items:flex-start;
				flex-direction: column;
				.goods-tit{
					width: 100%;
					height: 80upx;
					font-size:28upx;
					font-family:PingFangSC;
					font-weight:600;
					color:rgba(51,51,51,1);
					overflow : hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
				.goods-sku{
					margin-top: 10upx;
					font-size:24upx;
					font-family:PingFangSC;
					font-weight:400;
					color:rgba(51,51,51,1);
				}
				.goods-pay{
					margin-top: 20upx;
					font-size:24upx;
					font-family:PingFangSC;
					font-weight:400;
					color:rgba(153,153,153,1);
				}
			}
		}
	}
	.detail-box{
		margin-top: 20upx;
		width: 100%;
	}
	.detail-li{
		width: 100%;
		padding: 32upx 40upx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #FFFFFF;
		.detail-li-l{
			font-size:28upx;
			font-family:PingFangSC;
			font-weight:400;
			color:rgba(51,51,51,1);
		}
		.detail-li-r{
			width: 65%;
			text-align: right;
			font-size:28upx;
			font-family:PingFangSC;
			font-weight:500;
			color:rgba(51,51,51,1);
		}
		.border-bot{
			border-bottom: 1upx solid #EEEEEE;
		}
		.red-text{
			color: #F70000;
		}
	}
	.order-btn-box{
		width: 100%;
		height: 150upx;
		bottom: 0;
		background: #f7f7f7;
		position: fixed;
	}
	.order-btn{
		position: absolute;
		bottom:30upx;
		left: 50%;
		transform: translateX(-50%);
		width:400upx;
		height:80upx;
		background:rgba(247,0,0,1);
		box-shadow:0px 2upx 24upx 0px rgba(251,88,88,1);
		border-radius:40upx;
		text-align: center;
		line-height: 80upx;
		font-size:34upx;
		font-family:PingFangSC;
		font-weight:400;
		color:rgba(255,255,255,1);
	}
</style>
